<template>
  <div class="vuePagination">
    <div class="fenye">
    				<ul>
    					<li>
    						<span v-if="currentPage==1" class="notClick">
    							首页
    						</span>
    						<span v-else @click="curPage(1)">
    							首页
    						</span>
    					</li>
    					<li :class="currentPage<=1?'notClick':''" @click="curPage(currentPage-1)">
    						<span>
    							上一页
    						</span>
    					</li>
    					<li v-for="item in pagingList" :key="item.value">
    						<span v-if="sign==item.key" class="notClick">
    							{{item.key}}
    						</span>
    						<span v-else :class="item.value==currentPage?'actLink':''" @click="curPage(item.value)">
    							{{item.value}}
    						</span>
    					</li>
    					<li :class="currentPage>=pageTotal?'notClick':''" @click="curPage(currentPage+1)">
    						<span>
    							下一页
    						</span>
    					</li>
    					<li>
    						<span v-if="currentPage==pageTotal" class="notClick">
    							尾页
    						</span>
    						<span v-else @click="curPage(pageTotal)">
    							尾页
    						</span>
    					</li>
    					<li :style="{cursor:'default'}">
    						<span>
    							第{{currentPage}}页/共{{pageTotal}}页
    						</span>
    					</li>


    				</ul>
    			</div>
  </div>
</template>

<script>
  export default{
    		data(){
    					return{
                lists: [],
                pageTotal: null,
                currentPage: 1,
                tzNumber: null,
                sign: "...",
                signIndex: 4,
                pagingList: [],
                isShow: false
              }
    				},
            props:["last_page"],
    				watch: {
    					currentPage(val, oldVal) {
    						this.fetchData();
    					},
              last_page:{
                handler:function(new_last_page,old_last_page){
                  console.log("old_last_page:",old_last_page,"new_last_page:",new_last_page);
                  this.pageTotal=new_last_page;
                  this.fetchData();
                },
                deep:true,
                immediate:true
              }
    				},
            mounted() {
              let that=this;
            },
    				methods: {
    					curPage(num) {
    						 console.log("num:",num);
    						if (num < 1) {
    							return false;
    						} else if (num > this.pageTotal) {
    							return false;
    						} else {
    							this.currentPage = num;
                  this.$parent.getChargeReardFn(num);
    						}


    					},
    					fetchData() {
    						let that = this;
                that.last_page=that.pageTotal;
    						that.pagingList = [];
    						let tmp = null;
    						if (that.pageTotal > 6) {

    							if (that.currentPage == 1) {

    								for (let i = 1; i < 7; i++) {
    									if (i < that.signIndex) {
    										tmp = {
    											value: i,
    										}
    									} else if (i == that.signIndex) {
    										tmp = {
    											value: 0,
    											key: that.sign
    										}
    									} else if (i == (that.signIndex + 1)) {
    										tmp = {
    											value: that.pageTotal - 1,
    										}
    									} else {
    										tmp = {
    											value: that.pageTotal
    										}
    									}
    									that.pagingList.push(tmp);
    								}

    							} else if ((that.pageTotal - that.currentPage) <= that.signIndex) {


    								let startNum = that.pageTotal - 5;
    								for (let i = startNum; i < startNum + 6; i++) {
    									tmp = {
    										value: i
    									}

    									that.pagingList.push(tmp);
    								}

    							} else {

    								let startNum = that.currentPage - 1;
    								for (let i = 1; i < 7; i++) {
    									if (i < that.signIndex) {
    										tmp = {
    											value: (startNum - 1) + i
    										}
    									} else if (i == that.signIndex) {
    										tmp = {
    											key: that.sign
    										}
    									} else if (i == (that.signIndex + 1)) {
    										tmp = {
    											value: that.pageTotal - 1
    										}
    									} else {
    										tmp = {
    											value: that.pageTotal
    										}
    									}

    									that.pagingList.push(tmp);
    								}

    							}

    						} else {
    							for (let i = 1; i <= that.pageTotal; i++) {
    								tmp = {
    									value: i,
    									key: i
    								}
    								that.pagingList.push(tmp);
    							}

    						}
    					}
    				}
  }
</script>

<style lang="less" scoped="scoped">
  .fenye {
  				margin: 30px auto;
  			}

  			.fenye ul {
  				text-align: center;
  			}

  			.fenye ul li {
  				display: inline-block;
  				border-radius: 4px;
  				background: #000;
  				margin: 0 5px 10px;
  				cursor: pointer;
  				overflow: hidden;
  				vertical-align: top;
  			}

  			.fenye ul li span {
  				display: block;
  				color: #fff;
  				height: 30px;
  				line-height: 30px;
  				font-size: 15px;
  				padding: 0 5px;
  				font-weight: bolder;
  				text-shadow: 0 0 4px #000;
  			}

  			.actLink {
  				background: #f60;
  				cursor: default;
  				pointer-events: none;
  			}

  			.notClick {
  				cursor: not-allowed !important;
  				background-color: #666 !important;
  			}


</style>
